---
title: Schritte
description: Hier erfährst du, wie du nummerierte Listen mit Aufgaben erstellen kannst, um Schritt-für-Schritt-Anleitungen in Starlight zu erstellen.
---

import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';

Um eine nummerierte Liste von Aufgaben zu gestalten und Schritt-für-Schritt-Anleitungen zu erstellen, verwendest du die Komponente `<Steps>`.

import Preview from '~/components/component-preview.astro';

<Preview>

<Steps slot="preview">

1. Erstelle ein neues Starlight-Projekt:

   <Tabs syncKey="pkg">

   <TabItem label="npm">

   ```sh
   npm create astro@latest -- --template starlight
   ```

   </TabItem>

   <TabItem label="pnpm">

   ```sh
   pnpm create astro --template starlight
   ```

   </TabItem>

   <TabItem label="Yarn">

   ```sh
   yarn create astro --template starlight
   ```

   </TabItem>

   </Tabs>

2. Schreibe deine erste Dokumentationsseite.

</Steps>

</Preview>

## Import

```tsx
import { Steps } from '@astrojs/starlight/components';
```

## Verwendung

Verwende die Komponente `<Steps>`, um nummerierte Listen von Aufgaben zu gestalten.
Dies ist nützlich für komplexere Schritt-für-Schritt-Anleitungen, bei denen jeder Schritt deutlich hervorgehoben werden muss.

Wickle `<Steps>` um eine geordnete Standard-Markdown-Liste.
Die übliche Markdown-Syntax ist innerhalb von `<Steps>` anwendbar.

<Preview>

````mdx
import { Steps } from '@astrojs/starlight/components';

<Steps>

1. Importiere die Komponente in deine MDX-Datei:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Wickle `<Steps>` um deine geordneten Listenelemente.

</Steps>
````

<Fragment slot="markdoc">

````markdoc
{% steps %}

1. Importiere die Komponente in deine MDX-Datei:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Wickle `<Steps>` um deine geordneten Listenelemente.

{% /steps %}
````

</Fragment>

<Steps slot="preview">

1. Importiere die Komponente in deine MDX-Datei:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Wickle `<Steps>` um deine geordneten Listenelemente.

</Steps>

</Preview>

## `<Steps>`-Eigenschaften

**Implementation:** [`Steps.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Steps.astro)

Die Komponente `<Steps>` akzeptiert keine Eigenschaften.
